<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
%>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="copyright" content="Tencent"/>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>绑定手机</title>
    <link rel="stylesheet" type="text/css" href="<%=path%>/css/marketing/mobile_coupon_public.css" />
    <link rel="stylesheet" type="text/css" href="<%=path%>/css/marketing/bindCustomer01.css" />
    <link rel="stylesheet" type="text/css" href="<%=path%>/css/marketing/bindCustomer02.css" />
</head>
<body>
    <div class="m_xchunk">
        <div class="line">
            <!-- <span>账号</span> -->
            <div class="right fix">                
                <div class="input">
                    <input type="text" placeholder="请输入您的手机号" class="text" id="J-xphone">
                </div>
                <div class="code m_xonlye">
                    <input type="button" value="获取验证码" class="J_xcode" onclick="javascript:send();">
                </div>
            </div>
        </div>
        <div class="line">
            <!-- <span>验证码</span> -->
            <div class="right">
                <input id="verifyCode" type="test" placeholder="请输入验证码" class="text">
            </div>
        </div>
    </div>
    <div class="m_xbutton">
        <a onclick="javascript:verifyCode()" class="s_zc_button">绑定手机</a>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
	<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
	<script src="<%=path%>/js/marketing/public.js"></script>
	<script src="<%=path%>/js/marketing/validation.js"></script>
	<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
    <script type="text/javascript">
        //获取验证码
       /*  $('.J_xcode').click(function(){
            var $this = $(this),
                _this = this,
                i = 60;
            _this.disabled = 'disabled';
            clearInterval(repeat);
            var repeat = setInterval(function(){
                i--;
                if(i == 0){
                    _this.disabled = false;
                    $this.removeClass('gray').val('获取验证码');
                    clearInterval(repeat);
                }else{
                    $this.addClass('gray').val(i+'s后重发');
                }
            },1000);
        }); */

        // 手机号判断
        if($('#J-xphone').length >= 1){
            var phone   = document.getElementById("J-xphone");
            phone.oninput = function(){
                var oVal = this.value;
                this.value = oVal.replace(/\D/g,'');
                if(this.value.substring(0,1) != '1'){
                    this.value = this.value.substring(0,0);
                }else{
                    this.value = this.value.substring(0,11);
                };
            };
        };
    </script>
    <script type="text/javascript">
        var code_type='verify_code';
        var mobile="";
        var sendFlag=false;
        var code_id="";
        var ver_code="";
        var cid="";
        
        $(function(){
        	cid=getQueryString("cid");
        });
        
        
        function send(){
        	mobile=$('#J-xphone').val();;
        	console.log(mobile);
        	
        	if(!validatemobile(mobile)){
        		console.log("无效手机号码");
        		return "";
        	}
        	var url="<%=path%>/api/sms/verification_code/send";
			$.post(url, {
				"account" : mobile,
				"code_type" : code_type,
			}, function(data) {
				sendFlag=true;
				if(data.error_code==0){
				    code_id=data.tag;
					time();
					
				}else{
					sendFlag=true;
					alert(data.message);
				}
			});
        }
        
        function verifyCode(){
        	if(!sendFlag){
        		alert("请先活动验证码");
        		return ;
        	}
        	ver_code=$('#verifyCode').val();
        	if(!StringEmpty(ver_code)){
        		alert("请输入验证码");
        		return ;
        	}
        	
        	var url="<%=path%>/api/sms/verification_code/verify";
			$.post(url, {
				"account" : mobile,
				"code_type" : code_type,
				"ver_code" : ver_code,
				"code_id" : code_id,
			}, function(data) {
				
				if(data.error_code==0){
					getCustomerId();
				}else{
					alert("失败");
				}
			});
        }
        
    
        function getCustomerId(){
        	var url="<%=path%>/scan/member/getCustomerIdByPhone";
			$.post(url, {
				"cid" : cid,
				"phone" : mobile,
			}, function(data) {
				if(data.error_code==0){
					var customerId=data.data;
					window.location.href='<%=path%>/api/bm/ui/mobileCoupon?cid='+cid+"&cid="+customerId;
				}else{
					alert("失败");
				}
			});
        }
        
        
        function time(){
        	var $this = $(".J_xcode"),
            _this = this,
            i = 60;
        _this.disabled = 'disabled';
        clearInterval(repeat);
       
        var repeat = setInterval(function(){
            i--;
            if(i == 0){
            	$(".J_xcode").attr("disabled",false);
                $this.removeClass('gray').val('获取验证码');
                clearInterval(repeat);        
            }else{
            	$(".J_xcode").attr("disabled",true);
                $this.addClass('gray').val(i+'s重新获取');
                
            }
        },1000);	
        }    
    </script>
</body>
</html>